<template>
	<!-- 祠堂 -->
	<view class="clan_list">
		<view class="clan_item" v-for="(item, index) in props.list">
			<view class="clan_bgc">
				<image v-if="item.frontCover == 1" src="http://112.124.50.179:8888/imgs/home/clan_1.png"></image>
				<image v-if="item.frontCover == 2" src="http://112.124.50.179:8888/imgs/home/clan_2.png"></image>
				<image v-if="item.frontCover == 3" src="http://112.124.50.179:8888/imgs/home/clan_3.png"></image>
				<image v-if="item.frontCover == 4" src="http://112.124.50.179:8888/imgs/home/clan_4.png"></image>
				<image v-if="item.frontCover == 5" src="http://112.124.50.179:8888/imgs/home/clan_5.png"></image>
				<view class="clan_bgc_text">家族族谱</view>
			</view>
			<view>
				<view class="clan_name">{{ item.genealogyName }}</view>
				<view class="clan_ancestor">始祖:{{ item.ancestorName }}</view>
				<view class="clan_ancestor">人数:{{ item.genealogyPeopleNumber }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';

const props = defineProps({
	list: {
		type: Array,
		required: true,
		default: []
	}
});
onLoad(() => {});
</script>

<style lang="scss">
.clan_list {
	width: 100%;
	overflow-x: scroll;
	display: flex;
	align-items: center;

	.clan_item {
		width: 324rpx;
		height: 160rpx;
		background: #ececec;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
		display: flex;
		position: relative;

		.clan_item_medal {
			position: absolute;
			width: 42rpx;
			height: 42rpx;
			right: 0;
			top: 0;
		}

		.clan_bgc {
			width: 120rpx;
			height: 160rpx;
			border-radius: 8rpx;
			margin-right: 24rpx;
			position: relative;

			image {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.clan_bgc_text {
				position: absolute;
				z-index: 2;
				width: 80rpx;
				height: 120rpx;
				writing-mode: vertical-lr;
				font-weight: 600;
				font-size: 17rpx;
				color: #000000;
				line-height: 30rpx;
				font-family: '宋体';
				text-align: center;
				letter-spacing: 3rpx;
				left: 75rpx;
				top: 10rpx;

				/* #ifdef H5 */
				transform-origin: center top;
				transform: scale(0.7);
				/* #endif */
			}
		}

		.clan_name {
			margin-top: 18rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}

		.clan_ancestor {
			font-weight: 400;
			font-size: 22rpx;
			color: #333333;
			line-height: 30rpx;
			margin-top: 12rpx;
		}
	}
}
</style>
